<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收集数据列表</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="root">
<form @submit.prevent="submit">
    <label for="demo"> 账号：</label>
   <input type="text" id="demo" v-model.trim="account"><br><br>
    密码：<input type="password" v-model="password"><br><br>
    性别：男 <input type="radio" name="sex" value="male" v-model="sex">
    女<input type="radio" name="sex" value="female" v-model="sex"><br><br>
    年龄：<input type="number" v-model.number="age"><br><br>
    爱好：学习<input type="checkbox" v-model="hobby" value="study">
    打游戏<input type="checkbox" v-model="hobby" value="play">
    吃饭<input type="checkbox" v-model="hobby" value="eat"><br><br>
    所属校区
    <select v-model="city">
        <option>请选择校区</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="chengdu">成都</option>
        <option value="xian">西安</option>
    </select><br><br>
    其他信息：
    <textarea v-model.lazy="other"></textarea><br><br>
    <input type="checkbox" v-model="agree">阅读并接受<a href="https://www.baidu.com">《用户协议》</a><br><br>
    <button>提交</button>
</form>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false //阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
         account:'',
            password:'',
            sex:'female',
            age:'',
            hobby:[],
            city:'beijing',
            other:'',
            agree:''
        },
        methods:{
            submit(){
                console.log(JSON.stringify(this._data))
            }
        }
    })
</script>
</html>